@import "~primeflex/primeflex.css";

.write-post-container {
    min-height: 600px;

    // 以下覆盖 PrimeReact 的 FileUpload 组件样式
    .file-uploader {
        margin-bottom: 15px;

        .p-fileupload-content {
            padding: 2rem 1rem;
            border: 1px solid #dee2e6;
            color: #212529;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
            height: 210px;
            overflow-x: hidden;
            overflow-y: auto;

            .p-fileupload-row {
                display: inline-block;
                width: 120px;
                height: 140px;
                margin-right: 30px;
                margin-bottom: 15px;
                position: relative;

                >div {
                    display: block;
                    width: 100%;
                    height: 100%;
                    padding: 0px;
                    background: #ccc;

                    img {
                        max-height: 100%;
                        max-width: 100%;
                        width: auto;
                        height: auto;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        margin: auto;
                    }
                }
            }
        }
    }

    .uploaded-image-container {
        background: #555;
        padding: 2rem 1rem;
        border: 1px solid #555;
        color: #212529;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        height: 410px;
        overflow-x: hidden;
        overflow-y: auto;
        margin-bottom: 15px;

        .p-fileupload-row {
            display: inline-block;
            width: 140px;
            height: 160px;
            margin-right: 15px;
            margin-bottom: 15px;
            position: relative;

            >div {
                display: block;
                width: 100%;
                height: 100%;
                padding: 0px;
                background: #ccc;
            }

            >div:last-child {}

            img {
                max-height: 100%;
                max-width: 100%;
                width: auto;
                height: auto;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
        }
    }
}